<!-- 在案 -->
<template>
  <div class="on_case">
    <grouping ref="grouping" @onChangeTable="reTeamList" />
    <Row type="flex" justify="space-between" class="code-row-bg">
      <Col span="6" class="total_txt">
        <span>共{{ total }}人，已选{{ selectUserData.length }}人</span>
      </Col>
      <Col span="18">
        <Row type="flex" justify="end">
          <Button class="ml_10" type="primary" @click="addHandel('bg')" v-if="unlocking('0102030800')">
            添加后台人员
          </Button>
          <Button class="ml_10" type="primary" @click="openTask" v-if="unlocking('0102030700')">
            任务责任人管理
          </Button>
          <Button
            class="ml_10"
            type="success"
            :disabled="selectUserData.length == 0"
            @click="addGroup = true"
            v-if="unlocking('0102030103')">
            添加至分组
          </Button>
          <Button class="ml_10" type="primary" @click="Trimproporbtn()" v-if="unlocking('0102030200')">
            分摊比例调整
          </Button>
          <Button class="ml_10" type="primary" @click="addHandel('Reception')" v-if="unlocking('0102030300')">
            新增成员
          </Button>
        </Row>
      </Col>
    </Row>
    <div class="tab">
      <dt-grid ref="onCaseTable" :page="pageData" :onFetch="onFetch" :select="select" />
    </div>
    <!-- 任务责任人管理 -->
    <Modal
      v-model="taskOwner"
      title="任务责任人管理"
      @on-cancel="cancelTaskOwner"
      width="800px"
      :footerHide="true">
      <task-owner
        v-if="taskOwner"
        @onClose="cancelTaskOwner"
        @onChangeTable="reTeamList"
        :userData="selectUserData" />
    </Modal>
    <!-- 添加至分组 -->
    <Modal v-model="addGroup" title="添加至分组" @on-cancel="AllModalCancel" width="800px" :footerHide="true">
      <add-groups
        v-if="addGroup"
        @onClose="AllModalCancel"
        @onChangeTable="reTeamList"
        :userData="selectUserData" />
    </Modal>
    <!-- 新增成员 -->
    <Modal
      v-model="addModal"
      :title="addModalTitle"
      @on-cancel="AllModalCancel"
      width="600px"
      :footerHide="true">
      <add-user
        v-if="addModal"
        @onClose="AllModalCancel"
        @addUserRatio="addUserRatio"
        @onChangeTable="reTeamList"
        :addFlag="addModalFlag" />
    </Modal>
    <!-- 新增成员设置分配比例 -->
    <!-- @on-cancel="onCloseAddUserRatio" -->
    <Modal
      v-model="addUserRatioModal"
      title="请设置奖金分摊比例"
      width="800px"
      :footerHide="true"
      :closable="false"
      :mask-closable="false">
      <add-user-Ratio
        v-if="addUserRatioModal"
        @onCloseAddUserRatio="onCloseAddUserRatio"
        :addUserRatioData="addUserRatioData"
        @onChangeTable="reTeamList" />
    </Modal>
    <!-- 分摊比例调整 -->
    <Modal
      v-model="Trimproportion"
      title="分摊比例调整"
      @on-cancel="AllModalCancel"
      width="800px"
      :footerHide="true">
      <change-proportion
        v-if="Trimproportion"
        ref="Trimproportion"
        @onClose="AllModalCancel"
        @onChangeTable="reTeamList" />
    </Modal>
    <!-- 变更成员 -->
    <Modal
      v-model="changeUserModal"
      title="成员变更"
      @on-cancel="AllModalCancel"
      width="600px"
      :footerHide="true">
      <change-user
        v-if="changeUserModal"
        @onClose="AllModalCancel"
        :RowUserData="RowUserData"
        :name="'oncase'"
        @onChangeTable="reTeamList"
        @addUserRatio="addUserRatio"
        @openTask="openTask" />
    </Modal>
    <!-- 调离成员 -->
    <Modal
      v-model="delUserModal"
      title="成员调出"
      @on-cancel="AllModalCancel"
      width="800px"
      :footerHide="true">
      <del-user
        v-if="delUserModal"
        @onClose="AllModalCancel"
        :RowUserData="RowUserData"
        @onChangeTable="reTeamList"
        @hasTrimpropor="hasTrimpropor"
        @openTask="openTask" />
    </Modal>

    <!-- 调离成员是否调整奖金分摊比例 -->
    <Modal
      v-model="changeRatioModal"
      title="请确认"
      @on-cancel="CloseChangeRatio"
      width="400px"
      :footerHide="true">
      <p style="marginbottom: 20px; padding: 10px 20px">
        {{ RowUserData.userName }}在本案场的角色为：{{ userRoleNames }}，
        <br />
        请确认是否调整TA的“奖金分摊比例”？
      </p>
      <div class="flex flex-horizontal-end btn-operate">
        <Button @click="CloseChangeRatio">不调整</Button>
        <Button type="primary" @click="Trimproporbtn()" style="margin-left: 8px">立即调整</Button>
      </div>
    </Modal>
    <!-- 查看成员 -->
    <check-user ref="checkUser" @onChangeTable="reTeamList" />
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  import taskOwner from './modal/taskOwner'
  import grouping from './group/grouping.vue'
  import addUser from './modal/addUser'
  import addGroups from './modal/addGroup'
  import checkUser from './checkUser'
  import changeUser from './modal/changeUser'
  import delUser from './modal/delUser'
  import addUserRatio from './modal/addUserRatio'
  import changeProportion from './modal/changeProportion'
  import columns from '../opt/onCaseColumns.js'
  export default {
    components: {
      taskOwner,
      grouping,
      addUser,
      addGroups,
      checkUser,
      changeUser,
      delUser,
      addUserRatio,
      changeProportion
    },
    data() {
      return {
        pageData: {
          total: 0,
          current: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50]
        },
        addGroup: false, //添加至分组 flag
        addModal: false, //添加成员 flag
        Trimproportion: false,
        selectUserData: [], //分摊比例调整 flage
        changeUserModal: false,
        delUserModal: false,
        addUserRatioModal: false, //新增成员设置分配比例
        changeProportionModal: false,
        addUserRatioData: [],
        RowUserData: {},
        changeRatioModal: false, //控制是否调整比例弹窗
        userRoleNames: '', //在本案场参与分摊比例的角色名称
        taskOwner: false,
        addModalFlag: '', //用于区分新增  前台/后台
        addModalTitle: '',
        total: 0,
        select: {
          change: (e) => {
            this.selectedChange(e)
          },
          checkbox: {
            checkMethod: ({ row }) => {
              return !row.groupName
            }
          }
        }
      }
    },
    props: {
      userMess: {
        type: Object,
        default: () => {
          return {}
        }
      },
      buildingId: '',
      teamId: '',
      taskUserId: ''
    },
    methods: {
      //新增成员 前台/后台
      addHandel(type) {
        if (type == 'bg') {
          this.addModalTitle = '新增后台成员'
        } else {
          this.addModalTitle = '新增成员'
        }
        this.addModal = true
        this.addModalFlag = type
      },
      //任务责任人管理打开
      openTask() {
        this.taskOwner = true
      },
      //任务责任人管理关闭
      cancelTaskOwner() {
        this.taskOwner = false
      },
      //表格操作 查看
      checkUser(rows) {
        console.log(rows, '查看')
        this.$refs.checkUser.show(rows)
      },
      //表格操作 变更
      changeUser(rows) {
        console.log(rows, '变更')
        this.RowUserData = rows
        this.changeUserModal = true
      },
      //表格操作 调离
      delUserFun(rows) {
        console.log(rows, '调离')
        this.RowUserData = rows
        this.delUserModal = true
      },
      //楼盘团队列表
      reTeamList() {
        this.$refs.onCaseTable.fetch()
      },
      //select发生变化
      selectedChange(e) {
        this.chooseLen = e.length
        this.selectUserData = e
      },
      //新增成员关闭
      AllModalCancel() {
        this.addModal = false
        this.addGroup = false
        this.Trimproportion = false
        this.changeUserModal = false
        this.delUserModal = false
        this.$refs.onCaseTable.onClearSelection()
      },

      //新增成员设置分配比例
      addUserRatio(val) {
        if (val && val.length != 0) {
          this.addUserRatioModal = true
          this.addUserRatioData = val
        }
      },
      onCloseAddUserRatio() {
        this.addUserRatioModal = false
      },
      //分摊比例调整弹窗
      Trimproporbtn() {
        this.Trimproportion = true
        this.changeRatioModal = false
      },
      hasTrimpropor(val) {
        this.changeRatioModal = true
        this.userRoleNames = val
      },
      CloseChangeRatio() {
        this.changeRatioModal = false
      },
      onFetch(data) {
        console.log(data)
        let params = {
          buildingId: this.buildingId,
          teamId: this.teamId,
          userId: this.taskUserId,
          ...data
        }
        return teamsApi
          .GetTeamUsers(params)
          .then((res) => {
            if (res) {
              this.$refs.onCaseTable.onClearSelection()
              this.total = res.total
              return res
            }
          })
          .catch((err) => {
            this.total = 0
          })
      },
      closePower(data) {
        console.log(data, '1111')
        this.reCustomerList(data).then((len) => {
          if (len) {
            this.$Modal.confirm({
              title: '关闭权限确认',
              content:
                '<p>' +
                data.userName +
                '名下仍有正在服务的客户，关闭权限后其名下客户将会进入公客池。是否继续关闭权限？</p>',
              okText: '确定',
              cancelText: '取消',
              onOk: () => {
                this.userExitTeam(data)
              }
            })
          } else {
            this.$Modal.confirm({
              title: '关闭权限确认',
              content: '是否确认关闭权限，权限关闭后，该人员将置为离案',
              okText: '确定',
              cancelText: '取消',
              onOk: () => {
                this.userExitTeam(data)
              }
            })
          }
        })
      },
      //关闭权限
      userExitTeam(data) {
        let params = {
          changeType: 3,
          executeDate: new Date(),
          operatorId: this.userMess.userId,
          sourceCaseId: data.buildingId,
          teamId: data.teamId,
          userId: data.userId,
          authFlag: false,
          userRole: data.buildingRoles,
          groupId: data.groupId
        }
        teamsApi.userExitTeam(params).then((res) => {
          this.$Message.success('关闭成功!')
          this.reTeamList()
        })
      },
      // 查询顾问当前楼盘下的客户数
      reCustomerList(data) {
        return new Promise((resolve, reject) => {
          let params = {
            buildingId: data.buildingId,
            userId: data.userId
          }
          teamsApi.getCustomerPoolCountByUser(params).then((res) => {
            resolve(Number(res))
          })
        })
      }
    },
    mounted() {
      this.$refs.onCaseTable.init(this, new columns(this))
      this.$refs.onCaseTable.fetch()
    }
  }
</script>
<style lang="scss" scoped>
  .on_case {
    .tab {
      margin-top: 20px;
    }

    .total_txt {
      line-height: 32px;
    }

    .ml_10 {
      margin-left: 10px;
    }
  }
</style>
